<template>
    <div class="item-order">
        <table class="item-order-table">
            <tr>
                <td colspan="2" class="asheng-margin"></td>
            </tr>
            <tr>
                <td>
                    <div class="item-order-tag">订单信息</div>
                </td>
                <td class="item-order-status">订单状态：{{ oi.orderStatusStr ? oi.orderStatusStr : "无" }}</td>
            </tr>
            <tr>
                <td colspan="2" class="asheng-good-name">{{ oi.goodName ? oi.goodName : "" }}</td>
            </tr>
            <tr>
                <td colspan="2" class="asheng-margin" style="height: 1px;"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="item-order-content-div" style="height: height: 45px;line-height: 43px;">
                        <table class="item-order-content-table">
                            <tr>
                                <td>订单号：</td>
                                <td style="text-align: right;">{{ oi.gthOrderId ? oi.gthOrderId : "" }}</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="asheng-margin" style="height: 5px;"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="item-order-content-div" style="line-height: 25px;">
                        <table class="item-order-content-table" style="padding-top: 15px;padding-bottom: 15px;">
                            <tr>
                                <td>收件人：</td>
                                <td style="text-align: right;">{{ oi.receiverName ? oi.receiverName.substr(0, 1) + '**' : ""
                                }}</td>
                            </tr>
                            <tr>
                                <td>物流公司：</td>
                                <td style="text-align: right;">{{ oi.expressCompany ? oi.expressCompany : "" }}</td>
                            </tr>
                            <tr>
                                <td>物流单号：</td>
                                <td style="text-align: right;">{{ oi.expressNo ? oi.expressNo : "" }}</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr v-if="oi.failReason" style="font-size: 14px;color: red;">
                <td colspan="2" style="padding-top: 10px;">{{ oi.failReason }}</td>
            </tr>
            <tr>
                <td colspan="2" class="asheng-margin"></td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    name: "OrderItem",
    props: {
        order: {
            type: Object
        }
    },
    data() {
        return {
            oi: {}
        }
    },
    created() {
        this.initCurrPage()
    },
    methods: {
        initCurrPage() {
            this.oi = this.order
            if (this.oi) {
                if (this.oi.receiverPhone) {
                    let rp = this.oi.receiverPhone
                    this.oi.receiverPhone = rp.substr(0, 3) + "****" + rp.substr(7)
                }
                if (this.oi.failReason && this.oi.failReason.indexOf("敢探号")) {
                    this.oi.failReason = this.oi.failReason.replace("敢探号", "上游")
                }
            }
        }
    }
}
</script>
<style scoped>
table,
tr,
td {
    border: 0px;
}

.asheng-good-name {
    font-size: 18px;
    color: #000000;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.asheng-title {
    color: #666;
    font-size: 15px;
}

.asheng-val {
    color: #000000;
    font-size: 14px;
}

.asheng-order-status {
    height: 60px;
    width: 60px;
}

.asheng-order-status img {
    height: 60px;
    width: 60px;
}

.asheng-margin {
    height: 15px;
}

.item-order {}

.item-order-table {
    width: 94%;
    margin-left: 3%;
}

.item-order-tag {
    background-color: #0086F7;
    border-radius: 5px;
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: white;
    font-size: 14px;
}

.item-order-status {
    color: #0086F7;
    font-size: 14px;
    text-align: right;
    width: 50%;
}

.item-order-content-div {
    background-color: #F9FAFE;
    border-radius: 5px;
}

.item-order-content-table {
    width: 94%;
    margin-left: 3%;
    font-size: 14px;
}
</style>

